<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{ $t('riskControl.riskControl.60zeizn0b0g0') }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
      <a-col :span="8">
        <a-form-item field="areaName" :label="$t('riskControl.riskControl.60zeizn0flw0')">
          <a-input v-model="form.data.areaName" :placeholder="$t('riskControl.riskControl.60zeizn0g3c0')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="name" :label="$t('riskControl.riskControl.60zeizn0gbk0')">
          <a-input v-model="form.data.name" :placeholder="$t('riskControl.riskControl.60zeizn0gl40')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="address" :label="$t('riskControl.riskControl.60zeizn0gsw0')">
          <a-input v-model="form.data.address" :placeholder="$t('riskControl.riskControl.60zeizn0h0c0')" />
        </a-form-item>
      </a-col>
      <!-- <a-col :span="8">
        <a-form-item field="keywords" :label="$t('user.user.60zemoh0p680')">
          <a-input v-model="form.data.keywords" :placeholder="$t('user.user.60zemoh0pbk0')" />
        </a-form-item>
      </a-col> -->
      <template v-slot:add>
        <a-button type="primary" v-permission="['riskControl:add']" @click="form.create.show = true">
          <template #icon>
            <icon-plus />
          </template>
          {{ $t('riskControl.riskControl.60zeizn0h680') }}
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
        @refresh="getData">
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0flw0')" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            {{ record.areaName ? record.areaName : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0gbk0')" ellipsis tooltip :width="200">
          <template #cell="{ record }">
            {{ record.name ? record.name : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0gsw0')" ellipsis tooltip :width="200">
          <template #cell="{ record }">
            {{ record.address ? record.address : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0hfg0')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            {{ record.radius ? record.radius : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0hn40')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            {{ record.limitHeight == 0 ? $t('riskControl.riskControl.60zeizn0i3o0') : record.limitHeight +
              $t('riskControl.riskControl.60zeizn0ia40') }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0igc0')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            <a-tag color="#f53f3f" v-if="record?.status == 3">{{ $t('riskControl.riskControl.60zeizn0io80') }}</a-tag>
            <a-tag color="#00b42a"
              v-else-if="record?.status == 0">{{ $t('riskControl.riskControl.60zeizn0iuo0') }}</a-tag>
            <a-tag color="rgb(255 186 0)" v-else>{{ $t('riskControl.riskControl.60zeizn0iuo1') }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0j3c0')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            <div class="color" :style="{ backgroundColor: record?.color }"></div>
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0jbg0')" fixed='right' :width="320">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" @click="showArea(record)"
                v-permission="['riskControl:area']">{{ $t('riskControl.riskControl.60zeizn0jik0') }}</a-button>
              <!-- <a-button type="text" :disabled="record.type == 0" @click="handleDraw(record)" v-permission="['riskControl:draw']">{{$t('riskControl.riskControl.60zeizn0jos0')}}</a-button> -->
              <a-button type="text" :disabled="record.status == 3" @click="handleDraw(record)"
                v-permission="['riskControl:draw']">{{ $t('riskControl.riskControl.60zeizn0jos0') }}</a-button>
              <a-button type="text" :disabled="record.status == 3" @click="handleUpdata(record)"
                v-permission="['riskControl:edit']">{{ $t('riskControl.riskControl.60zeizn0jw80') }}</a-button>
              <a-button type="text" :disabled="record.status == 3" status="danger" v-permission="['riskControl:delete']"
                @click="handleDelete(record)">{{ $t('riskControl.riskControl.60zeizn0k7w0') }}</a-button>
            </a-space>
          </template>
        </a-table-column>
      </c-table>
      <Create @refresh="getData" v-model:show="form.create.show"></Create>
      <Updata @refresh="getData" v-model:show="form.update.show" v-model:data="form.update.data"></Updata>
      <CArea @refresh="getData" v-model:show="form.area.show" v-model:data="form.area.data"></CArea>
      <CDraw @refresh="getData" v-model:show="form.draw.show" :list="form.list" v-model:data="form.draw.data"></CDraw>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { apiRiskList } from '@/api/risk'
const local = useLocal()
const Create = defineAsyncComponent(() => import('./components/create.vue'))
const Updata = defineAsyncComponent(() => import('./components/updata.vue'))
const CArea = defineAsyncComponent(() => import('./components/area.vue'))
const CDraw = defineAsyncComponent(() => import('./components/draw.vue'))
const form = reactive({
  create: {
    show: false
  },
  update: {
    loading: false,
    show: false,
    data: {},
  },
  area: {
    show: false,
    data: {},
  },
  draw: {
    show: false,
    data: {},
  },
  delete: {
    show: false
  },
  // auths:[],
  // allAuths:[],
  data: {
    areaName: '',
    name: '',
    address: '',
    page: 1,
    pageSize: 10,
    uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    // limit: 5
  },
  loading: false,
  list: [],
  count: 0
})
// 风控区域管理列表
const getData = async () => {
  form.loading = true
  const { code, data } = await apiRiskList({
    ...form.data,
    areaName: form.data.areaName,
    name: form.data.name,
    address: form.data.address,
  })
  form.loading = false
  if (code != 200) return;
  form.list = data.list
  form.count = data.total
}
// 查看管控区域
const showArea = (record: any) => {
  form.area.data = cloneDeep(record)
  form.area.show = true
}
// 绘制风控区域
const handleDraw = (record: any) => {
  form.draw.data = cloneDeep(record)
  form.draw.show = true
}
// 编辑
const handleUpdata = (record: any) => {
  form.update.data = cloneDeep(record)
  form.update.show = true
}
// 删除
const handleDelete = async (record: any) => {
  useModal.warning({
    content: t('riskControl.riskControl.60zeizn0kd40'),
    onBeforeOk: async () => {
      const { code } = await apiRiskDelete({
        id: record.id
      })
      if (code != 200) return false;
      useMessage.success()
      getData()
      return true
    }
  })
}
onBeforeMount(() => {
  getData()
})
</script>

<style scoped lang="less">
.show {
  display: none
}

.color {
  width: 30px;
  height: 30px;
  border-radius: 2px;
}
</style>
